<template>
	<view class="content">
		<!-- header -->
		<view class="mine-header">
			<!-- 封装个人中心顶部自定义导航栏 -->
			<view class="Mine">
				<!-- left -->
				<view class="Mine-left"></view>
				<!-- center中间头像及上传 -->
				<view class="Mine-center">
					<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
						file-mediatype="image">
						<image :src="imgUrl" mode=""></image>
					</uni-file-picker>
					<!-- <image :src="imgUrl" mode=""></image> -->
					<!-- 下方usernmae -->
					<view class="username" @click="getUername">
						{{username}}
					</view>
				</view>
				<!-- 右侧设置tool -->
				<view class="Mine-right"></view>

			</view>
		</view>

		<!-- <uni-icons fontFamily="CustomFont" :size="26">{{'\uebc6'}}</uni-icons> -->
		<!-- 列表盒子 -->
		<view class="mine-main">
			<!-- 提示登录小卡片  -->
			<!-- v-if="reglogin === regloginTest ? isButtonDisabled : !isButtonDisabled"  -->
			<view class="isVIP">
				<!-- isVIPleft -->
				<view class="isVIPleft">
					<!-- top / buttom -->
					<view class="isVIPleft-top">
						<uni-icons type="vip" size="20"></uni-icons>
						<text>会员中心</text>
					</view>
					<!-- top / buttom -->
					<view class="isVIPleft-buttom">
						{{talk}}
					</view>
				</view>
				<!-- isVIPright -->
				<view class="isVIPright">
					<!-- 按钮 -->
					<button>立即绑定</button>
				</view>
			</view>
			<!-- 嵌套盒子 -->
			<view class="again">
				<MineOrder></MineOrder>
			</view>
		</view>


		<!--  -->
	</view>
</template>

<script>
	// import MineNavcation from '@/compopents/MineNavcation/MineNavcation.vue'
	import MineOrder from '@/compopents/MineOrder.vue'
	export default {
		// 监听
		components: {
			// MineNavcation,
			MineOrder,
		},
		data() {
			return {
				imgUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
				username: '注册 / 登录',
				testUsername: '注册 / 登录',
				talk: '绑定手机号即刻称为会员，享受会员福利',
				isButtonDisabled: true,
				cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				dynamicList: [],
				list: [{
						url: '/static/c1.png',
						text: 'Grid 1',
						badge: '0',
						type: "primary"
					},
					{
						url: '/static/c2.png',
						text: 'Grid 2',
						badge: '1',
						type: "success"
					},
					{
						url: '/static/c3.png',
						text: 'Grid 3',
						badge: '99',
						type: "warning"
					},
					{
						url: '/static/c4.png',
						text: 'Grid 4',
						badge: '2',
						type: "error"
					},

				],

				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				},
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'blue',
						style: 'dashed',
						radius: 2
					}
				},
				fileLists: [{
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',
					extname: 'png',
					name: 'shuijiao.png'
				}, {
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',
					extname: 'png',
					name: 'uniapp-logo.png'
				}, {
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg',
					extname: 'png',
					name: 'shuijiao.png'
				}, ]
			};

		},
		onLoad: function(o) {
			// 这里获取到的值为从A页面传递来的参数 usernmae
			console.log(o.username)
			if (this.username == null || o.username == null) {
				this.username = this.testUsername
			} else {
				let username = o.username;
				this.username = username
				// console.log('=======' + this.username);
			}
		},
		methods: {
			// 页面事件
			getUername() {
				console.log(this.username);
				if (this.username == this.testUsername) {
					uni.navigateTo({
						url: '/pages/login/regLogin',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '您已登陆，请勿重复登录！',
						showCancel: false
					})
				}
			},
			// 组件事件
			onClick(e) {
				console.log('执行click事件', e.data)
				uni.showToast({
					title: '敬请期待'
				});
			},
			switchChange(e) {
				uni.showToast({
					title: 'change:' + e.value,
					icon: 'none'
				});
			},
			change(e) {
				let {
					index
				} = e.detail
				this.list[index].badge && this.list[index].badge++

				uni.showToast({
					title: `点击第${index+1}个宫格`,
					icon: 'none'
				})
			},
			add() {
				if (this.dynamicList.length < 9) {
					this.dynamicList.push({
						url: `/static/c${this.dynamicList.length+1}.png`,
						text: `Grid ${this.dynamicList.length+1}`,
						color: this.dynamicList.length % 2 === 0 ? '#f5f5f5' : "#fff"
					})
				} else {
					uni.showToast({
						title: '最多添加9个',
						icon: 'none'
					});
				}
			},
			del() {
				this.dynamicList.splice(this.dynamicList.length - 1, 1)
			},

			// 个人事件
			relogin() {
				uni.navigateTo({
					url: '/pages/login/regLogin'
				})
			}

		}

	}
</script>

<style lang="scss">
	@font-face {
		font-family: CustomFont;
		src: url('../../static/logo/imgtest.jpg');
	}

	.uni-file-picker {
		display: flex;
		justify-content: center;
	}

	.Mine {
		height: 300rpx;
		padding: 12px;
		/* 设置背景图片 */
		background-image: url('@/static/images/bg.png');
		background-size: cover;
		/* 背景图片覆盖整个盒子 */
		background-position: right;
		/* 背景图片居中 */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.Mine-center {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			image {
				border-radius: 50%;
				width: 120rpx;
				height: 120rpx;
			}

			.username {
				cursor: pointer;
				font-size: 16px;
				text-align: center;
				font-weight: 600;
				margin-top: 8px;
				color: #00557f;
			}
		}
	}

	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		border-radius: 4px;
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */

	.mine-main {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px;

		.isVIP {
			font-size: 10px;
			font-weight: 600;
			display: flex;
			align-items: center;
			height: 60px;
			width: 100%;
			border-radius: 10px;
			background: linear-gradient(to right, #0b94ba, #eefffe);

			// background-color: antiquewhite;
			.isVIPleft {
				flex: 3;
				justify-content: center;

				.isVIPleft-top {
					padding-left: 8px;
					display: flex;
					align-items: center;
				}

				.isVIPleft-buttom {
					padding-left: 12px;
					display: flex;
					align-items: center;
				}
			}

			.isVIPright {
				padding-right: 20px;
				flex: 1;
				display: flex;
				align-items: center;
				width: 100%;

				button {
					background-color: #410000;
					color: #fff;
					cursor: pointer;
					font-size: 10px;
					width: 80px;
					border-radius: 20px;
					line-height: 26px;
					height: 26px;
				}
			}

			// 注册登录按钮
			// button{
			// 	font-size: 10px;
			// 	line-height: 20px;
			// 	width: 80px;
			// 	height: 20px;
			// 	cursor: pointer;
			// 	opacity: 0.8;
			// }
		}

		// 嵌套覆盖盒子
		.again {
			border-radius: 4px;
			width: 98%;
			height: 120px;
			background-color: #fff;
		}

	}

	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text {
		font-size: 14px;
		color: #333;
	}
</style>